<template>
  <div class="user">
    <page-search
      :searchConfig="searchFormConfig"
      @queryBtnClick="handleQueryClick"
      @resetBtnClick="handleResetClick"
    />
    <page-content
      ref="pageContentRef"
      :contentConfig="contentTableConfig"
      pageName="users"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
    >
      <template #resetPw="scope">
        <el-button
          type="text"
          icon="el-icon-s-promotion"
          size="mini"
          @click="resetPw(scope.row)"
        >
          reset email
        </el-button>
      </template>
    </page-content>
    <page-popup
      ref="pagePopupRef"
      pageName="users"
      :popupConfig="popupConfigRef"
      :defaultInfo="popupInfo"
    ></page-popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PagePopup from '@/components/page-popup'

import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'

import { usePageSearch } from '@/hooks/usePageSearch'
import { usePagePopup } from '@/hooks/usePagePopup'
import { useStore } from '@/store'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { popupConfig } from './config/popup.config'

export default defineComponent({
  name: 'user',
  components: {
    PageSearch,
    PageContent,
    PagePopup
  },
  setup() {
    const store = useStore()
    // 1.查询和重置处理
    const [pageContentRef, handleQueryClick, handleResetClick] = usePageSearch()

    // 作为扩展使用因为用户和组织以及工作场所可能存在一对多所以暂时用不到此处
    const popupConfigRef = computed(() => {
      return popupConfig
    })

    const resetPw = (userInfo: any) => {
      ElMessageBox.confirm(
        'action will permanently change the password. Continue?',
        'Warning',
        {
          confirmButtonText: 'Sure',
          cancelButtonText: 'Cancel',
          confirmButtonClass: 'btnFalses',
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          store.dispatch('manage/resetPwAction', { id: userInfo.userId })
          ElMessage({
            type: 'success',
            message: 'reset completed'
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'operation canceled'
          })
        })
    }
    // popup handle
    const newHandleCallback = () => {
      const passwordItem = popupConfigRef.value.formItems?.find(
        (item) => item.field === 'hash'
      )
      passwordItem!.isHidden = false
      popupConfigRef.value.title = 'create new user'
    }
    const editHandleCallback = () => {
      const passwordItem = popupConfigRef.value.formItems?.find(
        (item) => item.field === 'hash'
      )
      passwordItem!.isHidden = true
      popupConfigRef.value.title = 'edit user info'
    }

    // 处理的hook
    const [popupInfo, pagePopupRef, handleNewData, handleEditData] =
      usePagePopup(newHandleCallback, editHandleCallback)

    return {
      searchFormConfig,
      contentTableConfig,
      handleQueryClick,
      handleResetClick,
      pageContentRef,
      handleNewData,
      handleEditData,
      pagePopupRef,
      popupConfigRef,
      popupInfo,
      resetPw
    }
  }
})
</script>

<style scoped lang="less">
.btnFalses {
  background: #fff !important;
  background-color: #ec163a;
  border-color: #ec163a !important;
  color: #fff !important;
}
</style>
